<template>
	<div id="conten">
		<div class="ABox">
			<div class="title">
				<span class="ywColor">业务机（{{ywjData.ip}}）
							<nodeStatus  :nodeIp="ywjData.ip"></nodeStatus>
				</span>
			</div>
			<div class="topBpx">
				<div class="leftBox">
					传输模式：
				</div>
				<span v-for="item in options" :key="item.dictValue" :style="'color:' + item.extendVal" v-show="ywjData.pattern == item.dictValue">{{item.dictLabel}} <i class="centerBtn el-icon-right"></i></span>
				
				<el-select size="mini" v-model="ywjDataPattern" placeholder="请选择" style="width:144px">
					<el-option
						v-for="item in options"
						:key="item.dictValue"
						:label="item.dictLabel"
						:value="item.dictValue">
					</el-option>
				</el-select>
				<el-button size="mini" type="primary" plain class="ml10" @click="setGroupNodeNioWorkModeFn('ywj')">修改</el-button>
			</div>
			<div class="cenBOx">
				<div class="leftBox">
					写入线程：
				</div>
				<span class="rightSpan">
					<span v-if="ywjData.writedata === ''"> 加载中...</span>
					<span v-else-if="ywjData.writedata == 'RUNNING'" style="color: #67c23a">
						<i class="el-icon-loading"></i>
						开启</span>
					<span v-else style="color: #f56c6c">
						<i class="el-icon-error"></i>
						关闭</span>
				</span>
			</div> 
			 
			<div class="cenBOx">
				<div class="leftBox">
					传输线程：
				</div>
				<span class="rightSpan">
					<span v-if="ywjData.returndata === ''"> 加载中...</span>
					<span v-else-if="ywjData.returndata == 'RUNNING'" style="color: #67c23a">
						<i class="el-icon-loading"></i>
						开启</span>
					<span v-else style="color: #f56c6c">
						<i class="el-icon-error"></i>
						关闭</span>
				</span>
			</div>   
			  
			  
			<div class="cenBOx">
				<div class="leftBox">
					队列大小：
				</div>
				<span class="rightSpan">
					<span v-if="ywjData.queue === ''"> 加载中...</span>
					<span v-else style="color: #67c23a">
					{{ywjData.queue >= 0?ywjData.queue:'--'}}</span></span>
				<el-button size="mini" type="primary" plain class="ml10" @click="cleanGroupNodeNioQueueFn('ywj')">清除</el-button>
			</div>   


			<div class="cenBOx">
				<div class="leftBox">
					延迟时间：
				</div>
				<span class="longRightSpan">
					<span v-if="ywjData.delayTime === ''"> 加载中...</span>
					<span v-else-if="ywjData.delayTime == -1" >
						--
					</span>
					<span v-else style="color: #67c23a">
					{{ywjData.delayTime}}</span>
					
				</span>
			</div>  
		</div>
		<div class="BBox">
			<div class="title">
				<span class="bzColor">保障机（{{bzjData.ip}}）
					<nodeStatus  :nodeIp="bzjData.ip"></nodeStatus>
				</span>
			</div>
			
			<div class="topBpx">
				<div class="leftBox">
					传输模式：
				</div>
				<span v-for="item in options" :key="item.dictValue" :style="'color:' + item.extendVal" v-show="bzjData.pattern == item.dictValue">{{item.dictLabel}} <i class="centerBtn el-icon-right"></i></span>
				
				<el-select size="mini" v-model="bzjDataPattern" placeholder="请选择" style="width:144px">
					<el-option
						v-for="item in options"
						:key="item.dictValue"
						:label="item.dictLabel"
						:value="item.dictValue">
					</el-option>
				</el-select>
				<el-button size="mini" type="primary" plain class="ml10" @click="setGroupNodeNioWorkModeFn('bzj')">修改</el-button>
			</div>
			
			
			<div class="cenBOx">
				<div class="leftBox">
					写入线程：
				</div>
				<span class="rightSpan">
					<span v-if="bzjData.writedata === ''"> 加载中...</span>
					<span v-else-if="bzjData.writedata == 'RUNNING'" style="color: #67c23a">
						<i class="el-icon-loading"></i>
						开启</span>
					<span v-else style="color: #f56c6c">
						<i class="el-icon-error"></i>
						关闭</span>
				</span>
			</div> 
			
			<div class="cenBOx">
				<div class="leftBox">
					传输线程：
				</div>
				<span class="rightSpan">
					<span v-if="bzjData.returndata === ''"> 加载中...</span>
					<span v-else-if="bzjData.returndata == 'RUNNING'" style="color: #67c23a">
						<i class="el-icon-loading"></i>
						开启</span>
					<span v-else style="color: #f56c6c">
						<i class="el-icon-error"></i>
						关闭</span>
				</span>
			</div>   
			
			
			<div class="cenBOx">
				<div class="leftBox">
					队列大小：
				</div>
				<span class="rightSpan">
					<span v-if="bzjData.queue === ''"> 加载中...</span>
					<span v-else style="color: #67c23a">
					{{bzjData.queue>=0?bzjData.queue:'--'}}</span>
				</span>
				<el-button size="mini" type="primary" plain class="ml10" @click="cleanGroupNodeNioQueueFn('bzj')">清除</el-button>
			</div>   
			
			<div class="cenBOx">
				<div class="leftBox">
					延迟时间：
				</div>
				<span class="longRightSpan">
					<span v-if="bzjData.delayTime === ''"> 加载中...</span>
					<span v-else-if="bzjData.delayTime == -1" >
						--
					</span>
					<span v-else style="color: #67c23a">
					{{bzjData.delayTime}}</span>
				</span>	
			</div>  
		</div>
	</div>
</template>

<script>
	import {
		getGroupNodeNioInfo,
		setGroupNodeNioWorkMode,
		cleanGroupNodeNioQueue,
	} from "@/api/console/senior";
	//节点状态显示组件
	import nodeStatus from '@/views/components/simple/nodeStatus';
		
		export default {
			components: {
				nodeStatus,
			},
		data() {
			return {
				setHandleMonitorTimeout: null,
				options: [],
				value: '',
				groupId:'',
				ywjDataPattern:"",
				bzjDataPattern:"",
				ywjData:{
					id:'',
					ip:'',
					pattern:'',
					writedata:'',
					returndata:'',
					queue:'',
					delayTime:'',
				},
				bzjData:{
					id:'',
					ip:'',
					pattern:'',
					writedata:'',
					returndata:'',
					queue:'',
					delayTime:'',
				},
				ids: ''
				
			};
		},
	// beforeDestroy() {
	// 	debugger
	// 	clearInterval( this.setHandleMonitorTimeout);
  //   // this.setHandleMonitorTimeout = null;
	// 	// clearTimeout(this.setHandleMonitorTimeout)

  // },
		mounted(){
			
			//保障分组-系统状态		
			this.getDicts('group_node_nio_status').then(response => {
				
				if(response.data){
					this.options = response.data;
				}else{
					this.$message({
						message: '获取队列失败',
						type: 'error'
					});
				}
			})
		},
		methods: {
			getGroupNodeNioInfoF(nodeId) {
				getGroupNodeNioInfo({
			
					'nodeId':nodeId
				}).then(response => {
					// console.log(response)
					if(response.data){
						if(nodeId == this.ywjData.id){
							this.ywjData = response.data[this.ywjData.ip]
						}
						
						if(nodeId == this.bzjData.id){
							this.bzjData = response.data[this.bzjData.ip]
						}
						
					}else{
						this.$message({
							message: '获取队列数据失败',
							type: 'error'
						});
					}
				})
			},
			//获取保障组节点的模式   参数 保障组id
			getGroupNodeNioInfoFn(item){
				this.ids = item.id
				// groupId
				this.ywjData = {
					id:'',
					ip:'',
					pattern:'',
					writedata:'',
					returndata:'',
					queue:'',
					delayTime:'',
				},
				this.bzjData = {
					id:'',
					ip:'',
					pattern:'',
					writedata:'',
					returndata:'',
					queue:'',
					delayTime:'',
				}		
				this.ywjData.id = item.importantNodeId;
				this.ywjData.ip = item.importantNodeIp;
				this.bzjData.id = item.securityNodeId;
				this.bzjData.ip = item.securityNodeIp;	
				
				this.getGroupNodeNioInfoF(this.ywjData.id)
				this.getGroupNodeNioInfoF(this.bzjData.id)
				
				if (this.setHandleMonitorTimeout) {
					clearInterval(this.setHandleMonitorTimeout)
				}
				this.setHandleMonitorTimeout = setInterval(() => {
					this.getGroupNodeNioInfoF(this.ywjData.id)
					this.getGroupNodeNioInfoF(this.bzjData.id)
				},5000)
		
			
			},
			//设置模式   参数：{searchId：节点ID，groupStatus：模式  1、2、3、4}
			setGroupNodeNioWorkModeFn(type){
				var  formData = {};
				if(type == 'ywj'){
					formData.searchId = this.ywjData.id;
					formData.groupStatus = Number(this.ywjDataPattern);
				}else if(type == 'bzj'){
					formData.searchId = this.bzjData.id;
					formData.groupStatus = Number(this.bzjDataPattern);
				}
				
				setGroupNodeNioWorkMode(formData).then(response => {
					if(response.data){
						this.msgSuccess("模式设置成功");
					}else{
						this.$message({
							message: '模式设置失败',
							type: 'error'
						});
					}
				})
				
			},
			//清除队列 参数：{searchId ：节点ID}
			cleanGroupNodeNioQueueFn(type){
				var  formData = {};
				if(type == 'ywj'){
					formData.searchId = this.ywjData.id;
				}else if(type == 'bzj'){
					formData.searchId = this.bzjData.id;
				}
				
				cleanGroupNodeNioQueue(formData).then(response => {
					if(response.data){
						this.msgSuccess("清除队列 成功");
					}else{
						this.$message({
							message: '清除队列 失败',
							type: 'error'
						});
					}
					  var vue = this
						vue.add();
				})
			},
			
		}	
	}
</script>

<style scoped="scoped">
	#conten{
		display: flex;
		justify-content: space-between;
	}
	
	#conten > div{
		width: 430px;
		height: 300px;
		border: 1px solid #e3e3e3;
		border-radius: 4px;
		padding: 10px;
	}
	
	.title{
		text-align: center;
		padding: 10px;
		font-size: 16px;
	}	
	

	.ywColor{
		color: #67c23a;
	}
	.topBpx{
		margin-top:20px;
	}
	.bzColor{
		color:#1890ff
	}
	.ml10{
		margin-left: 10px;
	}
	.cenBOx{
		margin-top: 20px;
	}
	
	.leftBox{
		display: inline-block;
		width: 80px;
		text-align: right;
	}	
	.rightSpan{
		display: inline-block;
		width: 100px;
	}
	.centerBtn{
		margin: 0 20px;
	}
	.longRightSpan{
		width: 300px;
	}
</style>
